<template>
	<div class="list">
		<div class="classify_content">
			<div class="line_content">
				<div class="classify_item" @click="toRecommend(item)" v-for="item in navigations" :key="item.id">
					<div class="classify_item_image">
						<image :src="item.logo" style="width:96px;height:96px"></image>
					</div>
					<div class="item_tittle_content"><text class="classify_item_tittle">{{item.name}}</text></div>
				</div>
			</div>
		</div>
	</div>
</template>
<script>
	const eeui = app.requireModule('eeui');
	import {
		list as navigationList
	} from '../../../../api/navigation'
	export default {
		name: '',
		data() {
			return {
				tagIds: [],
				navigations: [],
				pageSize: 6
			}
		},
		props: [
			'content'
		],
		created() { // 在实例创建完成后被立即调用
			this.loadNavigation()
		},
		methods: {
			loadNavigation() {
				if (this.content.tagids != null) {
					this.tagIds = this.content.tagids.split(',');
					for (var i = 0; i < this.tagIds.length; i++) {
						this.tagIds[i] = parseInt(this.tagIds[i])
					}
				}
				navigationList({
					mchId: this.getGlobalData().mchId,
					tagIds: this.tagIds,
					pageSize: this.pageSize
				}).then(res => {
					for(var i=0;i<res.data.data.length;i++){
						this.thumbnail(res.data.data[i].logo,96, 96)
					}
					this.navigations = res.data.data
				})
			},
		toRecommend(e) {
			if (e.type == 1) {
				eeui.openPage({
						url: 'root://pages/goods/category/category.js',
						params:e.typeId,
                    statusBarType: 'immersion',
                    statusBarStyle:false
					},

				);
			}
			if (e.type == 2) {
				eeui.openPage({
					url: 'root://pages/index/wxPage/wxPage.js',
					params: e.typeId,
                    statusBarType: 'immersion',
                    statusBarStyle:false
				})
			}
			if (e.type == 3) {
				eeui.openPage({
						url: 'root://pages/goods/product/details.js',
						params:e.typeId,
                    statusBarType: 'immersion',
                    statusBarStyle:false
					},

				);
			}
			if (e.type == 12) {
				eeui.openPage({
					pageType: 'web',
					url: e.path,
                    statusBarType: 'immersion',
                    statusBarStyle:false
				})
			}
		},
		},
		components: {},
	}
</script>

<style scoped>
	.list {
		padding-left: 20px;
		padding-right: 20px;
		margin-top: 20px;
	}

	.classify_content {
		display: flex;
		width: 710px;
		height: 380px;
		padding-top: 30px;
		border-radius: 16px;
		flex-direction: column;
		background-color: white;
	}

	.classify_item {
		display: flex;
		flex-direction: column;
		width: 182px;
		align-items: center;
		margin-bottom: 37px;
	}

	.classify_item_image {
		width: 96px;
		height: 96px;
	}

	.item_tittle_content {
		margin-top: 15px;
		width: 96px;
		height: 25 px;
		text-overflow: ellipsis;
		overflow: hidden;
		lines: 0;
	}

	.classify_item_tittle {
		text-align: center;
		width: 100px;
		font-size: 24px;
		height: 24.5px;
		font-weight: 400;
		color: rgba(26, 26, 30, 1);
	}

	.line_content {
		display: flex;
		flex-direction: row;
		flex-wrap: wrap;
		justify-content: space-around;

	}

	.line_content_under {
		display: flex;
		flex-direction: row;
		margin-top: 37px;
	}
</style>
